<template>
    <div class="box">
        <!-- 头部 -->
            <Public-header></Public-header>
        <div class="main">
            <!-- 标题 -->
            <div class="title">
                <span>一共<span style="color:red;">23</span>个商品</span>
            </div>
            <!-- 页面左边内容 -->
            <div class="m-left">
                <!-- 页面左边内容上部分内容 -->
                <div class="m-l-top">
                    <div class="item">
                        <ul>
                            <li>城市：</li>
                            <li><a href="">全部</a></li>
                            <li v-for="(item,index) in lists" :key="index">
                                <a href="">{{ item }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul>
                            <li>分类：</li>
                            <li><a href="">全部</a></li>
                            <li v-for="(item,index) in titles" :key="index">
                                <a href="">{{ item }}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="item">
                        <ul>
                            <li>时间：</li>
                            <li><a href="">全部</a></li>
                            <li><a href="">今天</a></li>
                            <li><a href="">明天</a></li>  
                        </ul>  
                        <el-date-picker 
                        type="date" 
                        placeholder="选择日期" 
                        v-model="date"
                        class="date">
                        </el-date-picker>
                        -
                        <el-date-picker 
                        type="date" 
                        placeholder="选择日期" 
                        v-model="date1"
                        class="date">
                        </el-date-picker>
                        
                    </div>
                </div>
                <!-- 页面左边内容下部分内容 -->
                <div class="m-l-btm">
                    <div class="tabs">
                        <el-tabs 
                        v-model="activeName" 
                        type="card" 
                        @tab-click="handleClick"
                        class="t-nav">
                            <el-tab-pane label="热门推荐" name="first">
                                <ul>
                                    <li v-for="(item, index) in conLists" :key="index">
                                        <div class="t-img">
                                            <img src="../../public/images/item153206.jpg" style="height:100%;width:100%;">
                                        </div>
                                        <div class="t-con">
                                            <span  style="font-size:16px;color:black">[{{ item.cityOne }}] {{ item.name }}</span><br>
                                            <span style="font-size:12px;color:gray">{{ item.content }}</span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">{{ item.date }}</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon1.png" style="background:red">&nbsp;&nbsp;
                                                {{ item.city }}
                                            </span><br>
                                            <span>
                                                <span style="color:red">{{ item.priceOne }}-{{ item.priceTwo }} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">售票中</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span>电子票</span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="最近开场" name="second">
                                <ul>
                                    <li v-for="(item, index) in conLists" :key="index">
                                        <div class="t-img">
                                            <img src="../../public/images/big4.jpg" style="height:100%;width:100%;">
                                        </div>
                                        <div class="t-con">
                                            <span  style="font-size:16px;color:black">[{{ item.cityOne }}] {{ item.name }}</span><br>
                                            <span style="font-size:12px;color:gray">{{ item.content }}</span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">{{ item.date }}</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon1.png" style="background:red">&nbsp;&nbsp;
                                                {{ item.city }}
                                            </span><br>
                                            <span>
                                                <span style="color:red">{{ item.priceOne }}-{{ item.priceTwo }} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">售票中</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span>电子票</span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                            <el-tab-pane label="最新上架" name="third">
                                <ul>
                                    <li v-for="(item, index) in conLists" :key="index">
                                        <div class="t-img">
                                            <img src="../../public/images/big5.jpg" style="height:100%;width:100%;">
                                        </div>
                                        <div class="t-con">
                                            <span  style="font-size:16px;color:black">[{{ item.cityOne }}] {{ item.name }}</span><br>
                                            <span style="font-size:12px;color:gray">{{ item.content }}</span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">{{ item.date }}</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon1.png" style="background:red">&nbsp;&nbsp;
                                                {{ item.city }}
                                            </span><br>
                                            <span>
                                                <span style="color:red">{{ item.priceOne }}-{{ item.priceTwo }} </span>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <span style="font-size:12px;color:gray">售票中</span>
                                            </span><br>
                                            <span>
                                                <img src="../../public/images/icon2.png" style="background:red">&nbsp;&nbsp;
                                                <span>电子票</span>
                                            </span>
                                        </div>
                                    </li>
                                </ul>
                            </el-tab-pane>
                        </el-tabs>
                        <!-- 切换样式按钮 -->
                        <div class="qiehuan">
                            <div class="imgs">
                                <i class="el-icon-s-operation"></i>
                            </div>
                            <div class="imgs">
                                <i class="el-icon-menu"></i>
                            </div>
                        </div>
                        <!-- 分页 -->
                        <div class="page">
                            <span>共23条</span>
                            <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="23">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 页面右边内容 -->
            <div class="m-right">
                <div class="m-r-title">
                    <span>可能您还喜欢</span>
                </div>
                <div class="m-r-content">
                    <ul>
                        <li>
                            <div class="m-r-img">
                                <img src="../../public/images/item153206.jpg" alt="">
                            </div>
                            <div class="m-r-con">
                                <span>aergtai</span>
                                <span>2020-4-3</span>
                                <span style="color:red">30起</span>
                            </div>
                        </li>
                        <li>
                            <div class="m-r-img">
                                <img src="../../public/images/item153206.jpg" alt="">
                            </div>
                            <div class="m-r-con">
                                <span>aergtai</span>
                                <span>2020-4-3</span>
                                <span style="color:red">30起</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <public-footer></public-footer>
    </div>
</template>
<script>
import PublicHeader from '../components/publicHeader.vue'
import "@/Mock/api_Tabulation_city"
import "@/Mock/api_Tabulation_content"
import PublicFooter from '../components/publicFooter.vue'
export default {
    name: "Tabulation",
    components: {
        PublicHeader,
        PublicFooter
    },
    data() {
        return{
            lists: [],
            titles: [],
            date: "",
            date1: "",
            activeName: 'first',
            conLists:[]
        }
    },
    mounted() {
        this.$http.get("/api/Tabulation/city").then(res=>{
            this.lists = res.data.lists;
            this.titles = res.data.titles;
        }),
        this.$http.get("/api/Tabulation/content").then(res=>{
            this.conLists = res.data.conLists;
            console.log(conLists);
        })
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
        
    }
}
</script>
        
<style scoped>
    .box{
        width: 100%;
        height: 100%;
        background: gainsboro;
    }
    .main{
        width: 90%;
        height: 70%;
        /* border:1px solid red; */
        margin: 0 auto;
    }
    .title{
        width: 100%;
        height: 50px;
        background: white;
        line-height: 50px;
        position: relative;
    }
    .title>span{
        display:inline-block;
        position: absolute;
        left: 10px;
        /* float:left; */
    }
    /* 主体左边样式 */
    .m-left{
        width: 85%;
        height: 90%;
        /* border: 1px solid red; */
        float: left;
        /* background: white; */
    }
    ul li{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .m-l-top{
        width: 100%;
        height: 170px;
        /* border: 1px solid black; */
        background: white;
    }
    .m-l-top .item{
        width: 100%;
        height: 50px;
        border-top: 1px gray solid;
        
    }
    .item:nth-child(3) .date{
        width: 20%;
        margin-top: 15px;
    }
    .item ul{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    .item ul li{
        width: 10%;
        height: 25px;
        margin-top: 10px;
        line-height: 25px;
        font-size: 12px;
        /* font-weight: bold; */
        /* border: 1px solid seagreen; */
    }
    .item:nth-child(3){
        height: 70px;
    }
    .item:nth-child(3) ul{
        width: 40%;
        margin-top: 10px;
        float: left;
        margin-left: 5%;
        /* border: 1px solid red; */
    }
    .item:nth-child(3) ul li{
        width: 23%;
        height: 100%;
    }
    .item ul li:nth-child(2){
        background: crimson;
    }
    .item ul li:nth-child(2) a{
        color: white;
    }
    .m-l-btm{
        width: 100%;
        height: 80%;
        /* border: 1px solid goldenrod; */
        margin-top: 30px;
        background: white;
        margin-bottom: 10px;
    }
    .m-l-btm .tabs{
        width: 100%;
        height: 80%;
        /* border: 1px solid green; */
        position: relative;
    }
    .tabs .t-nav{
        width: 80%;
        height: 100%;
        /* border: 4px solid black; */
    }
    .tabs .t-nav ul{
        width: 100%;
        height: 1400px;
        display: flex;
        justify-content: space-between;
        flex-flow: wrap;
        /* border: 1px solid black; */
    }
    .t-nav ul li{
        width: 100%;
        height: 200px;
        /* border: 1px solid red; */
        float: left;
        margin-left: 20px;
        padding: 10px 0px;
    }
    .t-nav ul li .t-img{
        width: 16%;
        height: 100%;
        /* border: 1px solid gold; */
        float: left;
    }
    .t-nav ul li .t-con{
        width: 25%;
        height: 100%;
        /* border: 1px solid red; */
        float: left;
        font-size: 14px;
    }
    .t-con>span{
        display: block;
        width: 100%;
        height: 9%;
        /* border-bottom: 1px solid red; */
        text-align: left;
        margin-left: 10px;
    }
    .qiehuan{
        width: 100px;
        height: 37px;
        /* border: 1px solid red; */
        position: absolute;
        right: 30px;
        top: 0px;
        border-radius: 6px;
    }
    .qiehuan .imgs{
        width: 48%;
        height: 100%;
        float: left;
        border: 1px red solid;
        line-height: 37px;
        border-radius: 6px 0px 0px 6px;
    }
    .qiehuan .imgs:nth-child(2){
        border-radius: 0px 6px 6px 0px;
    }
    /* 主体右边样式 */
    .m-right{
        width: 14%;
        height: 1200px;
        /* border: 1px solid navajowhite; */
        float: right;
    }
    .m-r-title{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: left;
    }
    .m-r-content{
        width: 100%;
        height: 30%;
        background: white;
        padding-top: 10px;
    }
    .m-r-content ul li{
        width: 160px;
        height: 160px;
        /* border: 1px solid sandybrown; */
        margin: 10px;
        font-size: 12px;
    }
    .m-r-content ul li span{
        display: block;
        height: 50px;

    }
    .m-r-img{
        width: 80px;
        height: 100%;
        /* border: 1px solid red; */
        float: left;
    }
    .m-r-img img{
        height: 100%;
        width: 100%;
    }
    .m-r-con{
        width: 50px;
        height: 100%;
        float: left;
        text-align: left;
        padding-left: 10px;
    }
</style>